import ContentMenuDefaultItem from '@/components/ContentMenuDefaultItem'
import { appConfigActions } from '@/store/appConfigSlice'
import { useAppDispatch, useAppSelector } from '@/utils/hooks'
import { appContextMenuOpen, AppContextMenuOpenPropsType } from '@/utils/tools/doms'
import _ from 'lodash'
import { Icon } from 'magic-ui-react'
import { FC, memo } from 'react'
import { widgets } from '../index'
import { WidgetSizeObj, WidgetSizeObjKeys } from './cons'
import styles from './styles.module.less'
import { WidgetProps, WidgetSizeType } from './types'

const Widget: FC<WidgetProps> = (props) => {
  const {
    sizeType,
    widgetType,
  } = props

  const dispatch = useAppDispatch()

  const {
    box,
    appDrawerBoxsList
  } = useAppSelector((state) => state.appConfig);

  const {
    radius,
    shadow
  } = box

  /**
 * 删除图标
 */
  const closeFn = () => {
    let newList = [...appDrawerBoxsList]
    const positionIndex = newList.findIndex(item => item.widgetType === widgetType)
    if (_.isUndefined(positionIndex)) {
      return
    }
    newList[positionIndex] = null!
    newList = _.compact(newList)
    dispatch(appConfigActions.updateOther({
      appDrawerBoxsList: newList
    }))
  }

  /**
   * 设置组件大小
   * @param size WidgetSizeType
   */
  const editWidgetSize = (size: WidgetSizeType) => {
    let newList = [...appDrawerBoxsList]
    const findIndex = newList.findIndex(item => item.widgetType === widgetType)
    newList[findIndex] = {
      ...newList[findIndex],
      sizeType: size
    }
    dispatch(appConfigActions.updateOther({
      appDrawerBoxsList: newList
    }))
  }

  /**
   * 图标右键
   * @returns ReactNode
   */
  const contentMenusRender: AppContextMenuOpenPropsType['content'] = (appContextMenuClose) => {
    return (
      <>
        <div
          className="px-2"
        >
          <div className='flex gap-2 items-center'>
            <Icon icon="border-all" />
            <span>
              大小
            </span>
          </div>
          <ul className={styles.sizeList}>
            {WidgetSizeObjKeys.map(key => {
              return (
                <li
                  key={key}
                  className={styles.sizeItem}
                  onClick={() => {
                    editWidgetSize(key)
                    appContextMenuClose()
                  }}
                >{key}</li>
              )
            })}
          </ul>
        </div>
        <ContentMenuDefaultItem
          icon="trash-can"
          onClick={() => {
            closeFn()
            appContextMenuClose()
          }}
        >
          删除
        </ContentMenuDefaultItem>
      </>
    )
  }

  return (
    <div
      style={WidgetSizeObj[sizeType]}
    >
      <div
        className={styles.Widget}
        style={{
          borderRadius: `${radius}px`,
          boxShadow: `${shadow.h}px ${shadow.w}px ${shadow.blur}px ${shadow.spread}px var(--design-rgba-distant)`,
        }}
        onContextMenu={(e) => {
          e.stopPropagation()
          e.preventDefault()
          appContextMenuOpen(e, contentMenusRender)
        }}
      >
        {widgets?.[widgetType].comp(props)}
      </div>
      <div className={styles.title}>
        {widgets?.[widgetType].title}
      </div>
    </div>
  )
}

export default memo(Widget) 